<template>
  <div class="merchants-shop template-body">
    <!--面包屑部分-->
    <div class="ccui-navigation" ref="noPrintTop">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回
      </el-button>
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >{{ $store.getters.getBreadcrumb("level1").name }}</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{
            path: '/settlement-management/settlement-maintenance-approval'
          }"
          >结算管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{
            path: '/settlement-management/transportation-maintenance-approval'
          }"
          >运输结算管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-if="!isApproval"
          :to="{
            path: backUrl
          }"
          >结算单冲销</el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-else
          :to="{
            path: '/settlement-management/transportation-settlement-approval/settlement-list-pending'
          }"
          >结算单审批</el-breadcrumb-item
        >
        <el-breadcrumb-item>
          <span>查看</span>
          <span class="ccui-curr-crumb ccui-ml-10">
            {{ titleName }}
          </span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--主体部分-->
    <div class="detail-box ccui-clearfix">
      <!--左边详情部分-->
      <div
        :class="[
          approvingStatus ? 'detail-box' : 'details-box',
          'ccui-clearfix'
        ]"
      >
        <div class="detail-info">
          <!--审批状态 icon-->
          <div class="detail-info-el-Label" style="z-index: 999">
            <el-label :type="approving" v-if="approvingStatus"></el-label>
          </div>
          <div class="detail-info-form-container self-container">
            <el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              class="el-tabs__customize"
            >
              <el-tab-pane label="基本信息" name="first">
                <detailInformation
                  ref="baseInfo"
                  :dataInfo="baseInfoData"
                ></detailInformation>
              </el-tab-pane>

              <el-tab-pane label="结算单明细" name="second">
                <financeInfoCheck
                  ref="settlementDetail2"
                  :settlementList="settlementList"
                ></financeInfoCheck>
              </el-tab-pane>
              <!-- <el-tab-pane label="验收单明细" name="third">
                <purchaseListCheck
                  ref="acceptanceDetail"
                  :settlementList="settlementList"
                  :dataInfo="acceptanceDetailData"
                ></purchaseListCheck>
              </el-tab-pane> -->
              <el-tab-pane v-if="isTrue" label="附件" name="fourth">
                <fileInfo
                  ref="fileInfo"
                  isTab
                  state="detail"
                  v-model="fileList"
                ></fileInfo>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <!--右边审批状态-->
        <approval-read-record
          v-if="isTrue"
          :approvalRecordData="activities"
        ></approval-read-record>
      </div>
    </div>
    <!--  底部导航栏及签名导出  -->
    <bottomGuide
      v-if="isTrue"
      busiType="106"
      pageType="export/transSettlementWriteOffDetail"
      :approvalStatus="approving"
      :curPageId="$route.params.id"
      :businessCode="businessCode"
      @handleBack="handleBack"
    />
  </div>
</template>

<script>
import approvalReadRecord from "@/basa/components/public/approvalRecord";
import { getSessionItem, ishasAgentId } from "@/basa/utils";
import detailInformation from "./detailPages/detail-information";

import financeInfoCheck from "./components/financeInfoCheck";
// import purchaseListCheck from "./components/purchaseListCheck";

import fileInfo from "@/basa/components/public/uploadInfo2";
import publicComponent from "@/basa/components/public";

import {
  getSettlementWriteById,
  listScFilesPage,
  accountExport
} from "../api/settlement-written-off.js";

export default {
  name: "settlement-detail-item",
  components: {
    approvalReadRecord,
    detailInformation,
    financeInfoCheck,
    // purchaseListCheck,
    fileInfo,
    bottomGuide: publicComponent.bottomGuide
  },
  // mixins: [mixinCommon],
  data() {
    return {
      businessCode: "",
      downloadUrl: this.$addUrlPerFix(process.env.VUE_APP_BASE_URL),
      settlementList: [],
      // 审批记录数据
      activities: [],
      activeName: "first",
      readonlyInput: true,
      title: "新增信息",
      submitFlag: false,
      id: "",
      baseInfo: {},
      baseInfoData: {},
      acceptanceDetailData: [],
      fileInfoData: [],
      totalNum: 0,
      approving: "", // 审批状态
      approvingStatus: true, // 审批状态展示
      approvingType: {
        1: "approving", // 审批中
        2: "withdrawn", // 已撤回
        3: "approvaled", // 审批通过
        4: "sendback", // 审批退回
        5: "unapproval" // 审批不通过
      },
      isTrue: false,
      backUrl: "",
      titleName: "",
      taizhangDetails: 0
    };
  },
  activated() {
    this.id = this.$route.params.id;
    this.getDetail(this.id);
    this.backUrl = sessionStorage.getItem("fromPath");
    // this.getFileList();
  },
  deactivated(){
    this.isTrue = false;
  },
  methods: {
    getDetail(id) {
      const obj = { id: id };
      getSettlementWriteById(obj).then(res => {
        this.baseInfoData = res.data.data.settlementWriteOffBO;
        this.businessCode = res.data.data.settlementWriteOffBO.writeoffCode;
        this.titleName = res.data.data.settlementWriteOffBO.writeoffName;
        this.baseInfoData.writeoffMoney =
          this.baseInfoData.writeoffMoney !== null &&
          this.baseInfoData.writeoffMoney !== undefined
            ? (+this.baseInfoData.writeoffMoney).toFixed(2)
            : "";
        this.baseInfoData.contractMoney =
          this.baseInfoData.contractMoney !== null &&
          this.baseInfoData.contractMoney !== undefined
            ? (+this.baseInfoData.contractMoney).toFixed(2)
            : "";
        this.fileList = res.data.data.writeOffFiles;
        this.settlementList = res.data.data.settlementBOList;
        //对金额和数量帮处理，金额保留两位小数，数量保留一位小数
        this.settlementList.forEach(item => {
          // 结算单明细的表处理
          item.settlementCount =
            item.settlementCount !== null && item.settlementCount !== undefined
              ? (+item.settlementCount).toFixed(3)
              : "";
          item.settlementCountTotal =
            item.settlementCountTotal !== null &&
            item.settlementCountTotal !== undefined
              ? (+item.settlementCountTotal).toFixed(3)
              : "";

          item.unitPriceWithTax =
            item.unitPriceWithTax !== null &&
            item.unitPriceWithTax !== undefined
              ? (+item.unitPriceWithTax).toFixed(2)
              : "";

          item.moneyWithoutTax =
            item.moneyWithoutTax !== null && item.moneyWithoutTax !== undefined
              ? (+item.moneyWithoutTax).toFixed(2)
              : "";
          item.unitPriceWithoutTax =
            item.unitPriceWithoutTax !== null &&
            item.unitPriceWithoutTax !== undefined
              ? (+item.unitPriceWithoutTax).toFixed(2)
              : "";

          item.moneyWithTax =
            item.moneyWithTax !== null && item.moneyWithTax !== undefined
              ? (+item.moneyWithTax).toFixed(2)
              : "";

          item.settlementMoneyTotal =
            item.settlementMoneyTotal !== null &&
            item.settlementMoneyTotal !== undefined
              ? (+item.settlementMoneyTotal).toFixed(2)
              : "";
          // 验收单明细表的数据处理
          item.orderCount =
            item.orderCount !== null && item.orderCount !== undefined
              ? (+item.orderCount).toFixed(3)
              : "";

          item.acceptCount =
            item.acceptCount !== null && item.acceptCount !== undefined
              ? (+item.acceptCount).toFixed(2)
              : "";

          item.settlementPrice =
            item.settlementPrice !== null &&
            item.settlementPrice !== undefined &&
            item.settlementPrice !== undefined
              ? (+item.settlementPrice).toFixed(2)
              : "";
        });
        this.fileInfoData = res.data.data.writeOffFiles;
        this.fileInfoData.forEach(item => {
          item.createTime = item.uploadTime;
          item.uploadId = item.fileInfoId;
          item.fileSize = Math.round(item.fileSize / 1024) + "kb";
        });
        this.$refs.baseInfo.form = this.baseInfoData;
        this.activities = res.data.data.approveRecords;
        this.approving =
          this.approvingType[res.data.data.settlementWriteOffBO.approvalStatus];
        this.approvingStatus = false;
        this.$nextTick(() => {
          this.approvingStatus = true;
        });
        this.isTrue = true;
      });
    },
    getFileList() {
      const obj = {
        pageNo: 1,
        pageSize: 10
      };
      listScFilesPage(obj).then(res => {
        console.log(res);
        this.totalNum = res.data.data.recordsTotal;
        this.fileInfoData = res.data.data.rows;
        console.log(this.fileInfoData);
      });
    },
    handleClick(tab, event) {
      console.log(tab, event, this.activeName);
    },
    qryApproveRecord() {
      // const obj = {
      //   businessBillId: this.relationId,
      // };
      // qryApproveRecord(obj).then((res) => {
      //   res.data.data.forEach((item) => {
      //     if (item.operState === 0) {
      //       item.icon = "el-icon-time";
      //       item.color = "#F5A623";
      //     }
      //   });
      //   this.showArrpoval = true;
      //   this.activities = res.data.data;
      //   console.log(this.activities);
      // });
    },
    // 返回
    handleBack() {
      this.$router.push(
        sessionStorage.getItem("fromPath") ||
          "/settlement-management/settlement-all"
      );
    },
    //导出
    handleExport() {
      accountExport({
        id: this.id
      }).then(res => {
        if (res.data.code == 0) {
          window.open(
            this.downloadUrl +
              `/apis/smp/oss/downloadByUploadId?uploadId=${res.data.data.fileRspBo.uploadId}`
          );
        }
      });
    }
  },
  computed: {
    // 获取面包屑
    getBreadcrumb() {
      return getSessionItem("breadcrumb");
    },
    isApproval() {
      return this.$route.query.type == "approval";
    }
  },
  // 更改列表缓存状态
  beforeRouteLeave(to, from, next) {
    if (this.submitFlag === true) {
      for (var key in this.$vnode.parent.componentInstance.cache) {
        delete this.$vnode.parent.componentInstance.cache[
          ishasAgentId(to.path, key)
        ];
      }
    }
    this.isTrue = false;
    next();
  },
  beforeRouteEnter(to, from, next) {
    !(to.fullPath === from.fullPath) &&
      sessionStorage.setItem("fromPath", from.fullPath);
    next();
  },
};
</script>

<style lang="scss" scoped>
.el-input /deep/ input.el-input__inner {
  width: 260px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #cccccc;
}
.el-form-item-box {
  float: left;
  width: 325px;
  margin-left: 116px;
  margin-right: 60px;
  // 440px
}
.ccui-form .ccui-form-shortInput {
  width: 260px;
}
.ccui-form .ccui-form-textArea,
.ccui-form .ccui-form-textArea .el-textarea {
  width: 760px;
  height: 100px;
}
.el-form-item-textarea {
  float: left;
  width: 825px;
  margin-left: 116px;
}

//新增页tab切换样式
/deep/.el-tabs__nav {
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
}
/deep/.el-tabs__item {
  padding: 0 15px;
}
/deep/.ccui-form .ccui-form-child-table.el-table th {
  font-size: 13px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #4a4a4a;
}
.detail-info {
  width: calc(100% - 438px);
  min-height: calc(100vh - 260px);
  float: left;
  background: #fff;
  position: relative;
  padding: 20px 20px 20px 20px;
  margin: 15px 0 80px 0;
}
.approval-read-record {
  margin-top: 15px;
}
.detail-info-el-Label {
  position: absolute;
  width: 107px;
  right: 33px;
  top: 31px;
  z-index: 1;
}
</style>
